<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/common.js"></script>

</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img  class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="releaseTime"></span>
            浏览 <span> 1万+</span>
            回复 <span> 1万+</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <a class="userProfiles">
                <img  class="rounded-circle" render-src="author.headImgUrl">
                </a>
            </div>
            <div class="col-6 mine">
                <small>
                    <a class="userProfiles" >
                    <span render-html="author.nickName"></span>
                    </a>
                    <button class="btn" id="followBtn">+关注</button><br>
                    <span class="travelCount"></span>篇游记
                    <span  class="fansBtn"></span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place"></span>
            </div>
        </div>
    </div>
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="createTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span>
                </div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="personValue"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="travelContent.content">
        </div>
    </div>

    <hr>

    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up"  id="likeBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o"  id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="collect fa fa-star-o" id="collectBtn"> </i>
        </div>
    </div>
</div>
    <script>
        var state = 0;
        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            var id = getParams().id;
            if(user){
                var userId = user.id;
            }
            if(id){
                //判断是否用户是否存在
                if (user != null){
                    $.get("/travels/" + id,function (data) {
                        $(".travels").renderValues(data);
                    //==========================================
                        //判断状态是否收藏，改变收藏状态以及小心心显示
                        if (data.collect == 1){
                            //取消收藏
                            $(".collect").click(function () {
                                console.log(id);
                                $.ajax({
                                    url:"/travels/"+id,
                                    data:{collect: 0, userId: userId},
                                    type:"PUT",
                                    success: function (data) {
                                        console.log(data);
                                        $(document).dialog({
                                            type:"confirm",
                                            style:"IOS",
                                            titleShow:false,
                                            content:"取消收藏",
                                            buttons:[{
                                                name:"返回页面",
                                                callback:function () {
                                                    window.location.href = "/travelContent.html?id=" + id;
                                                }
                                            }]
                                        })
                                    }
                                })
                            })
                            //小心心变红
                            $(".collect").removeClass("fa-star-o").addClass("fa-star").css("color", "red");
                            //状态为未收藏时
                        } else if (data.collect == 0){
                            //收藏日报
                            $(".collect").click(function () {
                                $.ajax({
                                    url:"/travels/"+id,
                                    data:{collect: 1, userId: userId},
                                    type:"PUT",
                                    success: function (data) {
                                        console.log(data);
                                        $(document).dialog({
                                            type:"confirm",
                                            style:"IOS",
                                            titleShow:false,
                                            content:"收藏成功",
                                            buttons:[{
                                                name:"返回页面",
                                                callback:function () {
                                                    window.location.href = "/travelContent.html?id=" + id;
                                                }
                                            }]
                                        })
                                    }
                                })
                            })
                            //小心心变空
                            $(".collect").removeClass("fa-star").addClass("fa-star-o");
                        }
                    },"json");
                } else {
                    $.get("/travels/" + id,function (data) {
                        $(".travels").renderValues(data);
                    //==========================================
                        //判断状态是否收藏，改变收藏状态以及小心心显示
                        if (data.collect == 1){
                            //小心心变红
                            $(".collect").removeClass("fa-star-o").addClass("fa-star").css("color", "red");
                            //状态为未收藏时
                        } else if (data.collect == 0){
                            //小心心变空
                            $(".collect").removeClass("fa-star").addClass("fa-star-o");
                        }

                        //点击小心心
                        $(".collect").click(function () {
                            $(document).dialog({
                                type: 'confirm',
                                style:"IOS",
                                titleShow:false,
                                content: '亲,需要登录才能收藏',
                                onClickConfirmBtn: function () {
                                    window.location.href = "/login.html";
                                }
                            });
                        })
                    },"json");
                }

                $.get("/travels/" + id,function (data) {
                    sessionStorage.setItem("authorId",data.author.id);
                    $(".travels").renderValues(data);
                    /*点击跳转到用户主页*/
                    $(".userProfiles").click(function () {
                        $(this).attr("href","/userProfiles.html?id="+data.author.id);
                    });
                    /*获取作者信息*/
                    $.get("/users",{id:data.author.id},function (data) {
                        /*粉丝,游记回显赋值*/
                        $(".fansBtn").html(data.fansCount);
                        $(".travelCount").html(data.travelCount);
                    });

                },"json");
            }
            var user = JSON.parse( sessionStorage.getItem("user"));
            if (user){//登录才会显示点赞效果
                $.get("/praise/"+ user.id,{"typeId": id, "type": 3}, function (data) {
                    state = data.state;
                    if(data.state == 1){
                        $("#likeBtn").removeClass("fa-thumbs-o-up");
                        $("#likeBtn").addClass("fa-thumbs-up");
                    }else{
                        $("#likeBtn").removeClass("fa-thumbs-up");
                        $("#likeBtn").addClass("fa-thumbs-o-up");
                    }
                });
            }

            var nu = getParams().id;
            //点击评论按钮跳转到评论界面
            $("#commentBtn").click(function () {
                    $("#commentBtn").removeClass("fa fa-commenting-o");
                    $("#commentBtn").addClass("fa fa-commenting");
                    window.location.href="/travelComment.html?id="+id;
            })

            $("#likeBtn").click(function () {
                if (user) {
                    $.post("/praise/"+ user.id,{"typeId": id, "type": 3},function (data) {
                        if (data.success){
                            if (state == 1){
                                state = 0;
                                $("#likeBtn").removeClass("fa-thumbs-up");
                                $("#likeBtn").addClass("fa-thumbs-o-up");

                            } else{
                                state = 1;
                                $("#likeBtn").removeClass("fa-thumbs-o-up");
                                $("#likeBtn").addClass("fa-thumbs-up");
                            }
                        }
                    })
                }else{
                    $(document).dialog({
                        type: "confirm",
                        style: "IOS",
                        titleShow: false,
                        content: "亲,请先登录",
                        buttons: [{
                            name: "去登陆",
                            href:false,
                            callback: function () {
                                //去登陆界面
                                window.location.href="login.html";
                            }
                        }],
                        autoClose:3000
                    })
                }
            })

            /*获取登陆用户*/
            if (sessionStorage.getItem("user")) {
                var loginUser=JSON.parse(sessionStorage.getItem("user"));
            }

            /*如果登陆,判断是否已关注*/
            if (loginUser) {
                $.get("/addFriend", {userId: sessionStorage.getItem("authorId"), followedId: loginUser.id}, function (data) {
                    /*已关注*/
                    if (data) {
                        followBtn.html("已关注");
                        followBtn.css("border-color", "black");
                        followBtn.css("color", "black");
                        followBtn.css("background", "transparent");
                    }
                });
            }


            var action;
            var followBtn = $("#followBtn");
            /*点击关注*/
            followBtn.click(function () {
                /*判断是否登陆*/
                if (!loginUser) {
                    location.href="/login.html";
                    return;
                }
                if (followBtn.html() === "+关注") {
                    followBtn.html("已关注");
                    followBtn.css("border-color", "black");
                    followBtn.css("color", "black");
                    followBtn.css("background", "transparent");
                    action = "addFriend";

                } else {
                    followBtn.html("+关注");
                    followBtn.css("color", "black");
                    action = "delFriend";
                }
                /*发送请求到后端*/
                $.post("/addFriend", {userId: sessionStorage.getItem("authorId"), followedId: loginUser.id, action: action}, function (data) {
                    var fans = $(".fansBtn").html();
                    if (action == "addFriend") {
                        $(".fansBtn").html(parseInt(fans) + 1);
                    } else {
                        $(".fansBtn").html(fans - 1);
                    }
                });


                /*鼠标悬停事件*/
                followBtn.hover(function () {
                    if (followBtn.html() == "已关注") {
                        followBtn.html("取消关注");
                        followBtn.css("background", "white");
                        followBtn.css("color", "black");
                    }
                }, function () {
                    if (followBtn.html() === "+关注") {
                        followBtn.html("+关注")
                        return;
                    }
                    followBtn.html("已关注")
                    followBtn.css("background", "transparent");
                    followBtn.css("color", "black");
                });
            });

        })
    </script>
</body>
</html>